<template>
	<view class="repair-wrap">
		<view class="u-m-t-20 repair-box u-p-l-30 u-p-r-30" style="border-bottom: 0.5px solid #DDDDDD;border-top: 0.5px solid #DDDDDD;">
			<view style="width: 100%;">
				<view class="search">
					<input  class="search-input" placeholder="搜索姓名" />
				</view>
			</view>
		</view>
		<view class="u-m-t-20 repair-box u-p-40 u-p-l-30 u-p-r-30">
			<view class="list">
				<u-index-list >
					<view >
						<!-- <u-index-anchor /> -->
						<view class="list-cont" >
								<view class="list-left">
										<image src="../../static/image/underReview.png" class="list-img"></image>
									<view style="margin-left: 20rpx;">
										<view class="named">
											<view style="width: 100rpx;">张三</view>
											<view>人事部</view>
											<view>-主管</view>
										</view>
										<view class="title">电话：13778044410</view>
									</view>
								</view>
								<image src="../../static/image/tel.png" class="tel"></image>
							<!-- </view> -->
						</view>
						
					</view>
				</u-index-list>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onShow() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.repair-wrap {
		width: 100%;
		// min-height: 100vh;
		height: auto;
		// background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}
	.search {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #3d7fff;
		height: 100rpx;
		position: relative;
		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 560rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.search-input {
			width: 100%;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 20rpx;
			line-height: 66rpx;
			font-size: 28rpx;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}
	}
	.list {
			// width: 100%;
			display: flex;
			justify-content: space-between;
			
			.letter-all {
				font-size: 22rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 32rpx;
				text-align: center;
			}
	
			.list-cont {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				width: 80vw;
				
				.list-left {
					display: flex;
					align-items: center;
	.named {
					display: flex;
					font-size: 30rpx;
					color: #333333;
					line-height: 40rpx;
				}
					.title {
						font-size: 26rpx;
						color: #999999;
						width: 400rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
	
					.list-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
	
					.list-message {
						width: 100rpx;
						height: 100rpx;
						background: #F5A623;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
						margin-right: 20rpx;
	
						.addr {
							width: 42rpx;
							height: 58rpx;
						}
					}
				}
	
				.tel {
					width: 48rpx;
					height: 48rpx;
				}
	
				.time {
					font-size: 22rpx;
					color: #999999;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
	
					.red {
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-align: center;
						background: #FF3B30;
						border-radius: 100%;
						font-size: 20rpx;
						color: #FFF;
					}
				}
			}
			
		}
</style>

 
 
 